<template>
	<view class="video_tab">
		<view class="video_tab_title">
			<view class="title_inner">
				<uni-segmented-control
				:current="current" 
				:values="items.map(v => v.title)" @clickItem="onClickItem"
				styleType="text" activeColor="#d3237b"
				></uni-segmented-control>
			</view>
			<view class="iconfont icon-search1">	
			</view> 
		</view>
		 <view class="video_tab_content">
			<view class="" v-if="current < 4">
				<videoMain :urlobj='{url: items[current].url, params: items[current].params}'></videoMain>
			</view>
			<view class="" v-if="current === 4">
				<videoCategory></videoCategory>
			</view>
		</view>
	
	</view>
	
</template>

<script>
	import videoMain from './comps/main.vue'
	import videoCategory from './comps/category.vue'
	export default {
	data() {
		return { 
			items: [
				{title: '推荐',url:'http://157.122.54.189:9088/videoimg/v1/videowp/featured',params:{ limit:30, skip:0,order:'hot'}},
				{title: '娱乐',url:'http://157.122.54.189:9088/videoimg/v1/videowp/category/59b25abbe7bce76bc834198a',params:{ limit:30, skip:0,order:'new'}},
				{title: '最新',url:'http://157.122.54.189:9088/videoimg/v1/videowp/videowp',params:{ limit:30, skip:0,order:'new'}},
				{title: '热门',url:'http://157.122.54.189:9088/videoimg/v1/videowp/videowp',params:{ limit:30, skip:0,order:'hot'}},
				{title: '分类',url:'http://157.122.54.189:9088/videoimg/v1/videowp/category',params:{}}
			],
			current:0
		} 
	}, 
	components: {
		videoMain,
		videoCategory
	},
		methods: {
			onClickItem(index) {
				if (this.current !== index.currentIndex) { 
				this.current = index.currentIndex;
				}
			},
		}
	}
</script>

<style lang="less">
.video_tab {
		.video_tab_title {
			position: relative;
			.title_inner {
				width: 60%;
				margin: 0 auto;
			}
			.icon-search1{
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 5%;
			}
		}
		.video_tab_content {
			
		}
	}
</style>
